<template>
	<view>
		<view class="content">
			<scroll-view scroll-x="true" class="content-scroll" scroll-with-animation :scroll-left="scrollLeft">
				<view v-for="(item, index) in category" :key="index" class="scroll-item" @click="changeTitle(index)">
					<text class="item-text" :class="tabIndex == index? 'active' : ''">{{item.catename}}</text>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"scroll-nav",
		data() {
			return {
				category: [{
						id: 1,
						catename: '星期'
					},
					{
						id: 2,
						catename: '星期'
					},
					{
						id: 3,
						catename: '星期'
					},
					{
						id:4,
						catename: '星期'
					},
					{
						id: 5,
						catename: '星期'
					},
					{
						id: 6,
						catename: '星期'
					},
					{
						id: 7,
						catename: '星期'
					},
					{
						id: 8,
						catename: '星期'
					}
				],
		
				contentScrollW: 0, // 导航区宽度
				tabIndex: 0,
				scrollLeft: 0, // 横向滚动条位置
				
			}
		},

		props: {
			// category: {
			// 	type: Array,
			// 	default() {
			// 		return [];
			// 	}
			// }
		},

		mounted() {
			// 获取标题区域宽度，和每个子元素节点的宽度
			this.getScrollW();
				
			setTimeout(()=>{
			    console.log(this.category);
			},300)
				
		},
		methods: {
			// 获取标题区域宽度，和每个子元素节点的宽度以及元素距离左边栏的距离
			getScrollW() {
				const query = uni.createSelectorQuery().in(this);
		
				query.select('.content-scroll').boundingClientRect(data => {
					// 拿到 scroll-view 组件宽度
					this.contentScrollW = data.width
				}).exec();
		
				query.selectAll('.scroll-item').boundingClientRect(data => {
					let dataLen = data.length;
					for (let i = 0; i < dataLen; i++) {
						//  scroll-view 子元素组件距离左边栏的距离
						this.category[i].left = data[i].left;
						//  scroll-view 子元素组件宽度
						this.category[i].width = data[i].width
					}
				}).exec()
			},
		
		
			// 选择标题
			changeTitle(index) {
				this.tabIndex = index;
				
				// this.$emit('changeCon', this.tabIndex);
				
				// console.log(getApp().globalData.videoIndex);
		
				// 效果一(当前点击子元素靠左展示)  局限性：子元素宽度相同
				// this.scrollLeft = index * this.category[index].width
		
				// 效果一(当前点击子元素靠左展示)  子元素宽度不相同也可实现
				/* this.scrollLeft = 0;
				for (let i = 0; i < index; i++) {
				    this.scrollLeft += this.category[i].width
				}; */
		
		
				// 效果二(当前点击子元素靠左留一展示)  局限性：子元素宽度相同
				// this.scrollLeft = (index - 1)  * this.category[index].width
		
				// 效果二(当前点击子元素靠左留一展示)  子元素宽度不相同也可实现
				this.scrollLeft = 0;
				for (let i = 0; i < index - 1; i++) {
					this.scrollLeft += this.category[i].width
					
				};
		
		
				// 效果三(当前点击子元素居中展示)  不受子元素宽度影响
				// this.scrollLeft = this.category[index].left - this.contentScrollW / 2 + this.category[index].width / 2;
		
		
			}
		
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 70rpx;
		box-sizing: border-box;
		// background-color: pink;

		.content-scroll {
			
			height: 70rpx;
			white-space: nowrap;

			.scroll-item {
				height: 70rpx;
				padding: 0 30rpx;
				display: inline-block;
				text-align: center;

				.item-text {
					font-size: 28rpx;
					line-height: 70rpx;
					height: 70rpx;
					display: inline-block;
					padding: 0 20rpx;
					box-sizing: border-box;
					
					&.active {
						border-bottom: 2px solid #ff6d9f;
						color: #ff6d9f;
					}
					
				}
			}
		}
		
			/deep/::-webkit-scrollbar {
			
			  display: none;
			
			  width: 0;
			
			  height: 0;
			
			  color: transparent;
			
			  background: transparent;
			
			}
	}
</style>
